<template>
  <div class="user_list_item" :class="{ active: isActive }">
    <div class="faceImg">
      <a-avatar class="avatar" :size="40">
        <template #icon>
          <img :src="props.faceImg" />
        </template>
      </a-avatar>
      <div class="circle" v-if="cont">{{ cont }}</div>
    </div>
    <div class="message_box">
      <div class="title">{{ props.title }}</div>
      <div class="sub_title">
        <span>{{ props.subTitle }}</span>
      </div>
    </div>
    <div class="suffix">
      <div class="context">
        <div class="time">{{ props.time }}</div>
        <div></div>
      </div>
      <slot name="suffix"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  faceImg: string;
  title: string;
  time?: string;
  subTitle?: string;
  isActive?: boolean;
  cont?: number;
}
const props = withDefaults(defineProps<Props>(), {
  isActive: false,
  cont: 0,
});
</script>
<style scoped lang="scss">
.active {
  background-color: #493664;
}
.user_list_item {
  height: 70px;
  display: flex;
  cursor: pointer;
  align-items: center;
  width: 100%;
  user-select: none;
  &:hover {
    background-color: #493664;
  }
  .faceImg {
    width: 80px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .circle {
      position: absolute;
      background: #ff4d4f;
      height: 20px;
      min-width: 20px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      right: 5px;
      top: 5px;
      color: #fff;
    }
  }
  .message_box {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    .title {
      color: #fff;
      font-size: 14px;
    }
    .sub_title {
      color: #71608a;
      font-size: 12px;
      width: 150px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .suffix {
    min-width: 80px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .context {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      width: 100%;
      .time {
        color: #71608a;
        font-size: 12px;
      }
    }
  }
}
</style>
